import {useState} from "react";
import {Avatar, Button, Modal, Table, Upload} from "@douyinfe/semi-ui";
import {IconCloud, IconMore, IconUpload} from "@douyinfe/semi-icons";
import {getuserinfo, Stuimper} from "../../../../api/api.js";
import axios from "axios";

function Stuimp() {
    const [visible, setVisible] = useState(false);
    const [visible2, setVisible2] = useState(false);
    const [data, setData] = useState(0);
    const showDialog = () => {
        setVisible(true);
    };
    const showDialog2 = () => {
        setVisible2(true);
    };
    const handleOk = () => {
        setVisible(false);
    };
    const handleCancel = () => {
        setVisible(false);
    };
    const handleOk2 = () => {
        setVisible2(false);
    };
    const handleCancel2 = () => {
        setVisible2(false);
    };
    const handleAfterClose = () => {
        console.log('After Close callback executed');
    };
    const closee = () => {
        setVisible2(false)
        setVisible(false)
    };
    const mockRequest = async ({file, onProgress, onError, onSuccess}) => {
        console.log(file)
        const formData = new FormData();
        formData.append('file', file.fileInstance);
        const response = await axios.post(`http://localhost:8850/student/upload`, formData, {
            onUploadProgress: (progressEvent) => {
                const {loaded, total} = progressEvent;
                const progress = Math.round((loaded * 100) / total);
                onProgress({total, loaded, percent: progress});
            },
        }).then(r => {
            console.log(r.data.data)
            r.data.data.forEach(v=>{
                v.key = v.studentid
            })
            setData(r.data.data)
            showDialog2();
            // handleCancel2();
        });
    }
    async function stuimper() {
        const res = await Stuimper(data)
        console.log(res)
        closee()
    }

    const columns = [
        {
            title: '用户名',
            dataIndex: 'name',
            render: (text, record, index) => {
                return (
                    <div>
                        <Avatar
                            size="small"
                            shape="square"
                            src={record.nameIconSrc}
                            style={{ marginRight: 12 }}
                        ></Avatar>
                        {text}
                    </div>
                );
            },
        },
        {
            title: '学号',
            dataIndex: 'studentid',
        },
        {
            title: '所属寝室',
            dataIndex: 'rid',
        },
        {
            title: '性别',
            dataIndex: 'sex',
            // render: () => {
            //     return <IconMore />;
            // },
        },
        {
            title: '所属班级',
            dataIndex: 'ccid',
        },
    ];
    const footer = (
        <div style={{ textAlign: 'center' }}>
            <Button type="primary" onClick={stuimper} theme="solid"  >
                确定
            </Button>
            <Button type="primary" onClick={closee} theme="borderless" >
                取消
            </Button>
        </div>
    );

    return (
        <>
            <Button onClick={showDialog} icon={<IconCloud />} style={{marginLeft:'15px'}} type="secondary">批量导入</Button>
            <Modal
                title="基本对话框"
                visible={visible}
                onOk={handleOk}
                afterClose={handleAfterClose} //>=1.16.0
                onCancel={handleCancel}
                closeOnEsc={true}
            >
                <Upload
                    draggable={true}
                    dragMainText={'点击上传文件或拖拽文件到这里'}
                    dragSubText="支持任意类型文件"
                    onSuccess={(res)=>{console.log(res)}}
                    customRequest={mockRequest}
                ></Upload>
            </Modal>
            <Modal
                title="基本对话框"
                visible={visible2}
                onOk={handleOk2}
                afterClose={handleAfterClose} //>=1.16.0
                onCancel={handleCancel2}
                closeOnEsc={true}
                width={800}
                footer={footer}
            >
                <Table columns={columns} dataSource={data} pagination={false} />
            </Modal>

        </>
    );
}
export default Stuimp